<div class="abs-center wd-xl">
    <!-- START panel-->
    <div class="p">
        <img ng-src="{{user.picture}}" alt="Avatar" width="60" height="60"
             class="img-thumbnail img-circle center-block"/>
    </div>
    <div class="panel widget b0">
        <div class="panel-body">
            <p class="text-center">Please login to unlock your screen.</p>

            <form role="form" name="lockForm">
                <div class="form-group has-feedback">
                    <input id="exampleInputPassword1" type="password" placeholder="Password" required=""
                           name="lock_password" ng-model="lock.password" class="form-control"/>
                    <span class="fa fa-lock form-control-feedback text-muted"></span>
                    <span ng-show="lockForm.lock_password.$dirty &amp;&amp; lockForm.lock_password.$error.required"
                          class="text-danger">This field is required</span>
                    <div ng-show="authMsg" class="text-danger text-center">{{authMsg}}</div>
                </div>
                <div class="clearfix">
                    <div class="pull-left mt-sm">
                        <a ui-sref="page.recover" class="text-muted">
                            <small>Forgot your password?</small>
                        </a>
                    </div>
                    <div class="pull-right">
                        <!-- Change this button type to submit to send the form data-->
                        <button type="button" ng-click="unlock()" class="btn btn-sm btn-primary">
                            Unlock
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- END panel-->
    <div class="p-lg text-center">
        <span>&copy;</span>
        <span ng-bind="app.year"></span>
        <span>-</span>
        <span ng-bind="app.name"></span>
        <br/>
        <span ng-bind="app.description"></span>
    </div>
</div>